<template>
	<view>
		<view class="songlist">
			<view class="item" v-for="(songItem,index) in songItems">
				<view class="left">
					<view class="cover">
						<image :src="songItem.al.picUrl"></image>
					</view>
					<view class="song-items">
						<view class="songname">{{songItem.name}}</view>
						<view class="artist-album">{{songItem.ar[0].name}}-{{songItem.al.name}}</view>
					</view>
				</view>
				<view class="right">
					<!-- <image src="../../static/images/playMusicImg/play-icon.png" @click="playMusic(songItem)"></image> -->
					
					<view class="play-btn" v-if="!songItem.isplay" @click="playMusic(songItem)">
						<text>▶</text>
					</view>
					<view class="pause-btn" v-else @click="pauseMusic(songItem)">
						<text>| |</text>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	export default {
		name: "songList",
		props: {
			songItems: Array
		},
		data() {
			return {
				
				
			};
		},
		created() {
			
			
		},
		methods: {
			// 播放音乐
			playMusic(songItem) {
				
				if(uni.getStorageSync("currentPage") === "searchSong")
				{
					uni.$emit("controlSearchMusic",'playMusic',songItem)
					uni.$emit("playBar",'playSong')
					if(uni.getStorageSync("currentPlaySongPage") == 'recommendSong')
						uni.$emit("controlRecommendMusic",'stopMusic',songItem)
					else if (uni.getStorageSync("currentPlaySongPage") == 'indexSong')
						uni.$emit("controlIndexMusic",'stopMusic',songItem)
					uni.setStorageSync("currentPlaySongPage","searchSong")
				}
				else if(uni.getStorageSync("currentPage") === 'recommendSong')
				{
					
					uni.$emit("controlRecommendMusic",'playMusic',songItem)
					if(uni.getStorageSync("currentPlaySongPage") == 'searchSong')
						uni.$emit("controlSearchMusic",'stopMusic',songItem)
					else if (uni.getStorageSync("currentPlaySongPage") == 'indexSong')
						uni.$emit("controlIndexMusic",'stopMusic',songItem)
					uni.setStorageSync("currentPlaySongPage","recommendSong")
				}
				
				
				uni.setStorageSync("currentPlayItem",songItem)
				
			},
			pauseMusic(songItem){
				
				if(uni.getStorageSync("currentPage") === "searchSong"){
					uni.$emit("controlSearchMusic",'pauseMusic',songItem)
				}
				else if(uni.getStorageSync("currentPage") === "recommendSong"){
					uni.$emit("controlRecommendMusic",'pauseMusic',songItem)
				}
				
			}
		},
		mounted(){
			
		}
	}
</script>

<style lang="scss">
	.songlist {
		width: 690rpx;
		margin: 0 auto;
		margin-bottom: 120rpx;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left {
				display: flex;
				font-size: $uni-font-size-base;
				margin-bottom: 10rpx;

				.cover {
					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 5px;
						margin-right: 50rpx;
					}
				}

				.song-items {
					line-height: 70rpx;

					.artist-album {
						font-size: 20rpx;
						color: $uni-text-color-grey;
					}
				}
			}

			.right {
				line-height: 150rpx;
				.play-btn{
					width: 80rpx;
					height: 50rpx;
					background-color: #EEEDEF;
					border-radius: 320rpx;
					line-height: 40rpx;
					text-align: center;
					text{
						font-size: $uni-font-size-base;
						color: #6B90D7;
					}
				}
				.pause-btn{
					width: 80rpx;
					height: 50rpx;
					background-color: #EEEDEF;
					border-radius: 320rpx;
					line-height: 31rpx;
					text-align: center;
					text{
						font-size: 18rpx;
						color: #6B90D7;
						font-weight:bolder;
					}
				}
				// image {
				// 	width: 50rpx;
				// 	height: 50rpx;
				// }
			}

		}
	}
</style>
